<template>
	<div class="user-manage">
		<div class="community-input">
			<div class="community-input-seach">
				<el-input
				      v-model="seachValue"
				      placeholder="请输入标题开始您的搜索"
					  @keyup.enter.native="seachClick"
				    />
				
				<img src="../../assets/image/icon_home_seach.png" @click="seachClick">
			</div>
			<el-select clearable v-model="category_id" placeholder="请选择类别搜索" @change="categoryChange">
				<el-option  v-for="item in data.categoryOption" :key="item.id" :value ="item.id" :label="item.name"></el-option>
			</el-select>
			<el-button type="primary" @click="questionAdd">问题添加</el-button>
		</div>
		<div class="user-manage-table" ref="totalHeight">
			 <el-table :data="tableData"
			 :height="tbodyHeight"
			  style="width: 100%">
			  <el-table-column  property="nickName" label="作者"  width="180">
			  </el-table-column>
			  <el-table-column align="center" property="avatar" label="头像">
			  	<template #default="scope">
			  		<div>
			  			<img style="width: 60px;height: 60px;object-fit: cover;" :src="scope.row.avatar?scope.row.avatar:require('../../assets/image/icon-defalut.png')" >
			  		</div>
			  	</template>
			  </el-table-column>
			    <el-table-column  property="title" label="标题"  width="180">
			    </el-table-column>
				
				<el-table-column align="center" property="content" label="内容" >
					<template #default="scope">
						<div v-html="scope.row.content"></div>
					</template>
				</el-table-column>
				<el-table-column align="center" property="category_name" label="类别" >
				</el-table-column>
				<el-table-column align="center" property="create_time" label="创建时间" >
				</el-table-column>
			    <el-table-column align="center" property="Operations" label="操作">
			      <template #default="scope">
			        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
			          >编辑</el-button
			        >
					<el-button size="small" @click="handleDelete(scope.$index, scope.row)"
					  >删除</el-button
					>
			      </template>
			    </el-table-column>
			  </el-table>
		</div>
		<div class="user-page">
			<h1>共{{totalCount}}条 当前显示第{{currentPage}}页</h1>
			<div class="user-operation-button">
				<el-pagination background layout="prev, pager, next" :page-size="20" :total="totalCount" @current-change="currentChange">
				</el-pagination>
			</div>
		</div>
		<el-dialog v-model="dialogFormVisible" :title="data.tipTitle" width="600px" >
		    <el-form>
			<el-form-item label="标题">
			  <el-input v-model="questionForm.title" placeholder="请输入标题"></el-input>
			</el-form-item>
		      <el-form-item label="类别">
		        <el-select clearable v-model="questionForm.category_id" placeholder="请选择类别" >
		        	<el-option  v-for="item in data.categoryOption" :key="item.id" :value ="item.id" :label="item.name"></el-option>
		        </el-select>
				<el-button class="add-type" @click="addType">+</el-button>
		      </el-form-item>
			  <el-form-item label="答案">
			   <commonNewEdit :key="editKey" :contentHtml="questionForm.content" @onchange="editChange"></commonNewEdit>
			  </el-form-item>
		    </el-form>
		    <template #footer>
		      <span class="dialog-footer">
		        <el-button @click="dialogFormVisible = false">取消</el-button>
		        <el-button type="primary" @click="submitClick"
		          >确定</el-button
		        >
		      </span>
		    </template>
		  </el-dialog>
		<el-dialog v-model="dialogQuestionVisible" title="问题类型添加" width="300px" >
		    <el-form>
				<el-input v-model="data.questionName" placeholder="请输入名称"></el-input>
		    </el-form>
		    <template #footer>
		      <span class="dialog-footer">
		        <el-button @click="dialogQuestionVisible = false">取消</el-button>
		        <el-button type="primary" @click="questionSubmitClick"
		          >确定</el-button
		        >
		      </span>
		    </template>
		  </el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import commonNewEdit from "../../component/commonNewEdit.vue";
	import { ref,onMounted,nextTick,reactive } from 'vue' 
	import { ElMessage, ElMessageBox } from 'element-plus'
	import {
		HttpQuestionList,
		HttpQuestionTypeList,
		HttpAddQuestion,
		HttpAlterQuestion,
		HttpDeleteQuestion,
		HttpAddQuestionType
	} from '../../public/http'
	interface Question {
	  id:number,
	  title:string,
	  content:string,
	  category_name:string,
	  create_time:string,
	}
	let tableData = ref<Question>([])
	let seachValue = ref("")
	let category_id = ref("")
	let currentPage = ref(1)
	let totalPage = ref(0)
	let totalCount = ref(0)
	let dialogFormVisible = ref<Boolean>(false)
	let dialogQuestionVisible = ref<Boolean>(false)
	let userPermissions = ref<number>(1)
	let userInfo = ref<any>("")
	let tbodyHeight = ref<any>(0)
	const totalHeight = ref(null)
	let editKey = ref(0)
	let questionForm = ref<Question>({
		title:"",
		content:"",
		category_id:"",
	})
	let data = reactive({
		saveAddQuestionData:[],
		categoryOption:[],
		tipTitle:"问题添加",
		questionName:""
	})
	// 富文本编辑框改变
	const editChange = (value: string) => {
		  console.log(value)
	      questionForm.value.content = value;
	};
	// 问题添加
	const questionAdd = ()=>{
		dialogFormVisible.value = true
		data.tipTitle = "问题添加"
	}
	// 问题编辑
	const handleEdit = (index: number, row: Question) => {
		console.log(row)
	  questionForm.value = row
	  dialogFormVisible.value = true
	  data.tipTitle = "问题编辑"
	  editKey.value++
	  
	}
	// 删除问题
	const handleDelete = (index: number, row: Question) => {
		  ElMessageBox.confirm(
			  '你确定要删除此问题吗?',
			  '提示',
			  {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			  }
			)
	      .then(() => {
	        HttpDeleteQuestion({
	        	id:row.id,
	        }).then((res:any)=>{
	        	if(res.code === 200){
	        		ElMessage({
	        			message: res.message,
	        			type: 'success',
	        		})
	        		userMain(currentPage.value)
	        		return
	        	}
	        	ElMessage({
	        		message: res.message,
	        		type: 'warning',
	        	})
	        	
	        })
	      })
	      .catch(() => {
	        
	      })
	}
	
	
	// 确定修改
	const submitClick = ()=>{
		if(data.tipTitle == "问题添加"){
			HttpAddQuestion({
				title:questionForm.value.title,
				content:questionForm.value.content,
				category_id:questionForm.value.category_id,
			}).then((res:any)=>{
				if(res.code === 200){
					ElMessage({
						message: res.message,
						type: 'success',
					})
					dialogFormVisible.value = false
					userMain(currentPage.value)
					return
				}
				ElMessage({
					message: res.message,
					type: 'warning',
				})
				
			})
		}else{
			HttpAlterQuestion({
				id:questionForm.value.id,
				title:questionForm.value.title,
				content:questionForm.value.content,
				category_id:questionForm.value.category_id,
			}).then((res:any)=>{
				if(res.code === 200){
					ElMessage({
						message: res.message,
						type: 'success',
					})
					dialogFormVisible.value = false
					userMain(currentPage.value)
					return
				}
				ElMessage({
					message: res.message,
					type: 'warning',
				})
				
			})
		}
		
	}
	
	// 用户列表
	const userMain = (page)=>{
		HttpQuestionList(page,{
			key_word:seachValue.value,
			category_id:category_id.value
		}).then((res:any)=>{
			if(res.code === 200){
				tableData.value = res.data.questionData
				currentPage.value = res.data.current_page
				totalPage.value = res.data.total_page
				totalCount.value = res.data.total_count
			}
		})
	}
	// 类别列表
	const categoryMain = ()=>{
		HttpQuestionTypeList().then((res:any)=>{
			if(res.code === 200){
				data.categoryOption = res.data.questionTypeDetail
				console.log(data.categoryOption)
			}
		})
	}
	// 添加类别
	const addType = ()=>{
		dialogQuestionVisible.value = true
		
	}
	const questionSubmitClick = ()=>{
		HttpAddQuestionType({
			name:data.questionName
		}).then((res:any)=>{
			if(res.code === 200){
				ElMessage({
					message: res.message,
					type: 'success',
				})
				dialogQuestionVisible.value = false
				categoryMain()
				return
			}
			ElMessage({
				message: res.message,
				type: 'warning',
			})
		})
	}
	
	// 类别改变
	const categoryChange = (id)=>{
		userMain(1)
	}
	// 搜索点击
	const seachClick = ()=>{
		userMain(1)
	}
	// 监听页数改变
	const currentChange = (page)=>{
		userMain(page)
	}
	onMounted(async()=>{
		userMain(1)
		categoryMain()
		await nextTick()
		const tableHeight = totalHeight.value.offsetHeight
		tbodyHeight.value = tableHeight - 10
	})
	
</script>

<style lang="scss">
	.user-manage{
		width: 100%;
		height: calc(100%);
		overflow: hidden;
		background: #efedee;
		padding: 10px 10px 0 10px;
		box-sizing: border-box;
		
		.community-input{
			width: 100%;
			height: 50px;
			display: flex;
			.el-select{
				background: white;
				height: 35px;
				margin-left: 30px;
				border-radius: 3px;
				line-height: 35px;
			}
			.el-button{
				height: 35px;
				float: right;
				border-radius: 3px;
				line-height: 35px;
				background: rgb(249, 171, 8);
				color: white;
				border: 0;
				margin-left: 30px;
				letter-spacing: 1px;
			}
			.community-input-seach{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 30%;
				height: 35px;
				background-color: #ffffff;
				border-radius: 5px;
				padding: 0 10px;
			}
			input{
				width: calc(100% - 20px);
				background-color: transparent;
				border: 0;
				color: #1e1c2a;
				&::placeholder{
					color: #9195a1;
				}
			}
			img{
				width: 20px;
				height: 20px;
				cursor: pointer;
				&:hover{
					opacity: 0.6;
				}
			}
		}
		.user-manage-table{
			width: 100%;
			height: calc(100% - 50px - 40px);
		}
		.user-page{
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: space-between;
			padding: 0 20px;
			box-sizing: border-box;
			align-items: center;
			h1{
				color: #9195a1;
				font-size: 15px;
				letter-spacing: 2px;
				font-weight: 500;
			}
			
			.user-operation-button{
				display: flex;
				justify-content: flex-end;
				height: 50px;
				margin-top: 0;
				    margin-bottom: 10px;
				button{
					background: white;
					border: 1px solid #ccc;
					color: var(--main-font-color);
					border-right: 0!important;
					font-size: 13px;
				}
				li{
					background: white;
					border: 1px solid #ccc;
					color: var(--main-font-color);
					font-size: 13px;
					border-radius: 0;
				}
				.el-pagination.is-background .el-pager li:not(.disabled).active{
					background: rgb(59, 115, 240);
					border: 1px solid rgb(59, 115, 240);
				}
				.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
					margin: 0;
					border-right: 0;
					width: 30px!important;
					height: 30px!important;
				}
				.el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev:disabled{
					background: white;
				}
				.btn-next{
					border-right: 1px solid #ccc!important;
				}
				
			}
		}
	}
	.add-type{
		margin-left: 10px;
		font-size: 20px;
	}
</style>
